<template>
    <div class="guide-content">
        <div class="map-choose">
            <div class="close">
                <i class="iconfont icon-close" @click="closeUserGuide"></i>
            </div>
            <div class="guide-title">
                想制作这样的地图吗？可以分享？还有超值奖励？快选一个吧！
            </div>

            <div class="map-list">
                <div class="map-content" v-for="map in maps" :key="map.id">
                    <a v-bind:href="map.href" target="_blank">
                        <img  @error="setErrorImg" v-bind:src="map.url"/>
                        <div class="img-name">{{map.name}}</div>
                    </a>
                </div>
            </div>
            
            <div class="never-show">
                <g-checkbox
                :model="neverShow"
                v-on:change="neverShow =! neverShow">不再提示</g-checkbox>
            </div>
        </div>
    </div>
</template>

<script>
    import GCheckbox from '../common/g-checkbox'

    export default {
        name: "UserGuide",
        data (){
            return {
                maps: [
                    {
                        id:'1',
                        name: '全球航线图地图',
                        url: require('../../../static/img/user-guide/map1.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=1'

                    },
                    {
                        id:'2',
                        name: '北京人口分布地图',
                        url: require('../../../static/img/user-guide/map2.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=2'
                    },


                    {
                        id:'3',
                        name: '伦敦霍乱分析地图',
                        url: require('../../../static/img/user-guide/map3.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=3'

                    },
                    {
                        id:'4',
                        name: '南京市建筑地图',
                        url: require('../../../static/img/user-guide/map4.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=4'
                    },
                    {
                        id:'5',
                        name: '科比投篮区域及命中率地图',
                        url: require('../../../static/img/user-guide/map5.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=5'

                    },
                    {
                        id:'6',
                        name: '美国通勤地图',
                        url: require('../../../static/img/user-guide/map6.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=6'
                    },
                    {
                        id:'7',
                        name: '全球40年恐怖袭击时态地图',
                        url: require('../../../static/img/user-guide/map7.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=7'

                    },
                    {
                        id:'8',
                        name: '北京银行分布地图',
                        url: require('../../../static/img/user-guide/map8.png'),
                        href: '/apps/dataviz/new/edit?userguide=true&mapid=8'
                    }
                ],
                neverShow: false,
            }
        },
        methods:{
            closeUserGuide (){
                this.$emit('close-user-guide',this.neverShow);
            },
            setErrorImg (e){
                e.target.src = '';
            }
        },

        components:{
            GCheckbox
        }
    }
</script>

<style lang="scss">
    @import "common";

    .guide-content{
        width: 100%;
        height: 100%;
        position: fixed;
        display: flex;
        background-color: rgba(128, 138, 135, 0.6);
        z-index: 2000;

        .close{
            text-align: right;
            margin-top: 15px;
            margin-right: 15px;
            color:#545e65;
            .iconfont{
                font-size: 26px;
            }
            &:hover{
                color: #4087f7;
                cursor: pointer;
            }
        }

        .map-choose{
            width: 810px;
            background-color: white;
            margin: auto;
            border-radius: 3px;
            .guide-title{
                text-align: center;
                font-size: 26px;
                margin: 0 0 30px 0;
            }
            
            .map-list{
                display: flex;
                flex-flow: row wrap;
                width: 100%;
                margin: 0 20px;

                .map-content{
                    text-align: center;
                    padding: 0 6px;

                    img{
                        display: inline-block;
                        width: 180px;
                        height: 128px;
                        // height:auto;
                        border-radius: 4px;

                        &:hover{
                            @include box-shadow(1px 1px 10px 2px rgba(0, 0, 0, 0.3));
                        }

                    }

                    .img-name{
                        font-size: 14px;
                        color: #545e65;
                        margin: 8px 0 22px 0;                    
                    }

                }
            }
        }

        .never-show{
            font-size: 20px;
            color: #545e65;
            margin:0 0 15px 0;
            margin-left: 724px;
        }
    }
</style>
